<template>
  <div class="page-container">
    <h2>详情</h2>
    <div class="flex">
      <div class="w-100">
        <el-row>
          <el-col
            v-for="(item, index) in infoList.recoveryInfo"
            :key="index"
            :span="item.span || 8"
          >
            <strong>{{ item.label || '' }} :</strong>
            {{ list[item.key] || '' }}
          </el-col>
        </el-row>
      </div>
    </div>

    <el-row style="height: 20px" />
    <el-divider />
    <h2>回收信息</h2>
    <div class="flex">
      <div class="w-100">
        <el-row>
          <el-col
            v-for="(item, index) in infoList.itemInfo"
            :key="index"
            :span="item.span || 8"
          >
            <!-- 判断当前如果是图片，做特殊处理 -->
            <div v-if="item.type === 'image'" class="itemType">
              <strong>{{ item.label || '--' }} :</strong>
              <el-image
                style="width: 100px; height: 100px"
                :src="list[item.key]"
                :fit="cover"
              />
            </div>
            <div v-else class="itemType">
              <strong>{{ item.label || '--' }} :</strong>
              {{ list[item.key] || '--' }}
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script>
  import { getProductDetail } from '@/api/receiveGoods'
  import { Delete, Plus, Search } from '@element-plus/icons-vue'

  export default defineComponent({
    name: 'AssetManagement',
    setup() {
      const route = useRoute()
      const id = route.query.id
      const state = reactive({
        infoList: require('../staticFile/static')[0],
        editRef: null,
        list: {},
        AssetInfoList: [],
        listLoading: true,
        layout: 'total, sizes, prev, pager, next, jumper',
        total: 0,
        selectRows: '',
        queryForm: {},
        statusList: [
          {
            label: '分配',
            value: 0,
          },
          {
            label: '报废',
            value: 1,
          },
          {
            label: '报备',
            value: 2,
          },
        ],
      })

      const setSelectRows = (val) => {
        state.selectRows = val
      }
      const handleEdit = async (row) => {
        if (row.id) {
          try {
            const { data: data } = await getDetail({ deptId: row.id })
            state.editRef.showEdit(data)
          } catch (e) {
            console.error(e)
          }
        } else {
          state.editRef.showEdit()
        }
      }
      const fetchAssetInfoList = async () => {
        try {
          const { data: data } = await getProductDetail(state.queryForm)
          state.list = data
          state.listLoading = false
        } catch (e) {
          console.error(e)
        }
      }

      onMounted(() => {
        state.queryForm.id = id
        if (state.queryForm.id) {
          fetchAssetInfoList()
        }
      })

      return {
        ...toRefs(state),
        setSelectRows,
        handleEdit,
        fetchAssetInfoList,
        Delete,
        Plus,
        Search,
      }
    },
  })
</script>

<style scoped>
  .flex {
    display: flex;
  }

  .ml-30 {
    margin-left: 30px;
  }

  .w-100 {
    width: 100%;
  }

  .mb-16 {
    margin-bottom: 16px;
  }

  .toolbar {
    margin-bottom: 4px;
  }

  :deep() {
    .el-col {
      margin-bottom: 32px;
    }
  }

  .itemType {
    > strong {
      margin-right: 8px;
    }
  }
</style>
